<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/style.css">
		<script src="js/jq.js"></script>
		<script src="js/slide.js"></script>
	</head>
	<body style="background:#fff">
		<div class="container">
			<div class="header header-cont">
				<div class="wrap">
					<div class="header-top">
						<div class="logo">
							<a href="index.html"><img src="img/logo.svg" alt=""></a>
						</div>
						<div class="nav">
							<ul class="clearfix">
								<li>
									<a href="list.html">所有商品</a>
								</li>
								<li><a href="list.html">篮球</a></li>
								<li><a href="list.html">跑步</a></li>
								<li><a href="list.html">新品</a></li>
								<li><a href="list.html">企业团购</a></li>
								<li><a href="list.html">大码鞋</a></li>
								<li><a href="list.html">太极</a></li>
								<li><a href="list.html">秒杀</a></li>
							</ul>
							<div class="subnav">
								<div class="wrap">
									<dl>
										<dt>男鞋</dt>
										<dd><a href="list.html">篮球鞋</a></dd>
										<dd><a href="list.html">篮球鞋</a></dd>
									</dl>
									<dl>
										<dt>男鞋</dt>
										<dd><a href="list.html">篮球鞋</a></dd>
										<dd><a href="list.html">篮球鞋</a></dd>
									</dl>
								</div>
							</div>
						</div>
						
						<div class="header-top-right">
							<div class="message">
								<ul class="clearfix">
									<li><a id="status" href="">请登录</a></li>
									<li><a href="shop.html">购物车(0)</a></li>
									<li><a href="">我的订单</a></li>
									<li>
										<a href="">网站导航</a>
										<div class="submenu">
											<a href="">匹克官网</a>
											<a href="">俱乐部</a>
											<a href="">PEAK+社区</a>
											<a href="">校服/定制</a>
											<a href="">商品大全</a>
											<a href="">正品验证</a>
											<a href="">服务中心</a>
											<a href="">官店微博</a>

										</div>
									</li>
									<li>
										<a href="">联系客服</a>
										<div class="submenu">
											<a href="">售前</a>
											<a href="">售后</a>
										</div>
									</li>
									<li><a href="JavaScript:;">手机版</a></li>
								</ul>
							</div>
							<div class="search">
								<input type="text" id="test">
								<button id="sbtn"><img src="img/icon-seach.png" alt=""></button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="main-con">
				<div class="wrap-cont">
					<div class="login-reg">
						<div class="login-reg-left">
							<h3>还未注册？</h3>
							<p class="btns">注册你的匹克账户</p>
							<img class="gzh" src="img/login-code.jpg" alt="">
							<p class="t01">匹克官方网店微信公众号</p>
							<p class="t02">关注不一样的运动商城</p>
						</div>
						<div class="login-reg-right">
							<div class="formbox1 formbox">
								<h3>登录你的匹克会员</h3>
								<p><input id="username" type="text" placeholder="用户名"><span></span></p>
								<p><input id="password" type="password" placeholder="密码"><span></span></p>
								<p class="forget"><a href="">忘记密码？</a></p>
								<p><input id="login" type="submit" value="登录"></p>
							</div>
							<div class="formbox2 formbox" style="display:none;">
								<h3>欢迎使用匹克会员</h3>
								<p><input id="username1" type="text" placeholder="用户名"><span></span></p>
								<p><input id="password1" type="password" placeholder="密码"><span></span></p>
								<p><input id="repassword" type="password" placeholder="确认密码"><span class="passwordtips">密码由6-32位字符组成，建议由于数字、英文、字母组合</span></p>
								<p><input id="reg" type="submit" value="立即注册"></p>
								<p class="agree"><input id="checkagree" type="checkbox"><label for="checkagree">我已阅读并同意</label><a href="">匹克会员注册协议</a></p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="footer">
				<div class="footer-top">
					<div class="wrap">
						<ul>
							<li>
								<img src="img/foot-icon1.png" alt="">
								<h3>防伪查询</h3>
							</li>
							<li>
								<img src="img/foot-icon2.png" alt="">
								<h3>满99元包邮</h3>
							</li>
							<li>
								<img src="img/foot-icon3.png" alt="">
								<h3>7天无理由退货</h3>
							</li>
							<li>
								<img src="img/foot-icon4.png" alt="">
								<h3>品牌直营</h3>
							</li>
							<li>
								<img src="img/foot-icon5.png" alt="">
								<h3>团购服务</h3>
							</li>
						</ul>
					</div>
				</div>
				<div class="footer-bottom">
					<div class="footer-links">
						<div class="wrap">
							<div class="footer-links-left">
								<dl>
									<dt>购物相关</dt>
									<dd><a href="">新手帮助</a></dd>
									<dd><a href="">购物指南</a></dd>
								</dl>
								<dl>
									<dt>售后服务</dt>
									<dd><a href="">正品验证</a></dd>
									<dd><a href="">退货换货</a></dd>
									<dd><a href="">查看物流</a></dd>
								</dl>
								<dl>
									<dt>会员服务</dt>
									<dd><a href="">关于抵用券</a></dd>
									<dd><a href="">积分规则</a></dd>
								</dl>
								<dl>
									<dt>友情链接</dt>
									<dd><a href="">匹克官网</a></dd>
									<dd><a href="">匹克补货</a></dd>
									<dd><a href="">匹克团购通</a></dd>
									<dd><a href="">匹克校服</a></dd>
									<dd><a href="">匹克品牌</a></dd>
								</dl>
								<dl>
									<dt>服务热线</dt>
									<dd><a href="">售前：0595-2275 0137</a></dd>
									<dd><a href="">售后：400-884-8840</a></dd>
									<dd><a href="">工作日 9:00-23:00(节假日不休息)</a></dd>
								</dl>
							</div>
							<div class="footer-links-right">
								<dl>
									<dt><img src="img/foot-qrcode.jpg" alt=""></dt>
									<dd>匹克官方商城
										微信公众号</dd>
								</dl>
								<dl>
									<dt><img src="img/qrcode.png" alt=""></dt>
									<dd>匹克微服务</dd>
								</dl>
								<dl>
									<dt><img src="img/00.png" alt=""></dt>
									<dd><a href="">立即加入</a></dd>
								</dl>
							</div>
						</div>
					</div>
					<div class="footer-copy">
						<div class="wrap">
							<img src="img/aq.png" alt="">
							<span> Copyright© 2014-匹克网方网店</span>
							<span>版权所有 | 闽ICP备11009488号-1</span>
							<span>移动统计</span>
						</div>
					</div>
				</div>
			</div>
			<div class="f-nav">
				<ul>
					<li>
						<img class="img" src="img/icon-s-item1.png" alt="">
						<img class="h-img" src="img/icon-s-item1-1.png" alt="">
					</li>
					<li>
						<img src="img/icon-s-item2.png" alt="">
						<a href="">购<br />物<br />车</a>
					</li>
					<li class="tbs">
						<img src="img/icon-s-item9.png" alt="">
						<a href="">优惠<br />券</a>
					</li>
					<li class="tbs">
						<img src="img/icon-s-item3.png" alt="">
						<a href="">我的<br />收藏</a>
					</li>
					<li class="tbs">
						<img src="img/icon-s-item5.png" alt="">
						<a href="">网站<br />客服</a>
					</li>
					<li class="top">
						<img src="img/icon-s-item8.png" alt="">
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>
<script>
	$("#login").click(function() {
		let username = $("#username").val();
		let password = $("#password").val();
		if (username && password) {
			$.ajax({
				url: 'http://10.35.164.178:8080/login',
				data: {
					username: username,
					password: password
				},
				success(data) {
					if (typeof data === "string") {
						alert("登录成功");
						setCookie("username",username,60)//过期时间是30分钟后
						setCookie("password",password,60)//过期时间是30分钟后
						setCookie("id",data,60)//过期时间是30分钟后
						location.href = "http://10.35.164.178:8080/index.html";
					} else {
						alert("用户名或密码错误");
					}
				}
			})
		} else {
			alert("用户名或密码不能为空");
		}
	})	
</script>
<script>
	// 设置cookie函数
	function setCookie(key,value,expires){
		if(typeof expires === "number"){
			let date = new Date();
			date.setMinutes(date.getMinutes()+(expires-8*60))
			document.cookie = `${key}=${value};expires=${date}`;
		}
		else{
			document.cookie = `${key}=${value};expires=${expires}`;
		}
	}
	// 获取cookie函数
	function getCookie(key){
		let cookie = document.cookie;
		let arr = cookie.split("; ");
		let result = {}
		arr.forEach(item=>{
			let key = item.split("=")[0];
			let value = item.split("=")[1];
			result[key] = value;
		})
	
		if(key){
			return result[key];
		}
		return result;
	}
	if(getCookie("username")){
		$("#status").html(getCookie("username")+","+"已登录")
	}else{
		$("#status").html("请登录")
	}	 
</script>
<script>
	$(function() {
		$(".nav ul li,.subnav").hover(function() {
			$(".subnav").toggle()
		})
		$(".top").click(function() {
			$("html").animate({
				scrollTop: 0
			}, 300)
		})
		$(window).scroll(function() {
			if ($(document).scrollTop() === 0) {
				$(".f-nav").stop().animate({
					right: "-40px"
				}, 200)
			} else {
				$(".f-nav").stop().animate({
					right: "0px"
				}, 200)
			}
		})

		$(".add").click(function() {
			let count = Number($("#testvalue").val())
			count++;
			$("#testvalue").val(count)
		})
		$(".sub").click(function() {
			let count = Number($("#testvalue").val())
			if ($("#testvalue").val() === "1") {
				return;
			}
			count--;
			$("#testvalue").val(count)
		})
		let flag = true;
		$(".btns").click(function() {
			if(!flag){
				$(".formbox1").show();
				$(".formbox2").hide();
				flag = true;
				$(this).html("注册你的匹克账户");
				$(".login-reg-left h3").html("还未注册？");
			}else{
				$(".formbox1").hide();
				$(".formbox2").show();
				flag = false;
				$(this).html("登录你的匹克账户");
				$(".login-reg-left h3").html("已有账号登录");
			}			
		})
	})
</script>
<script>
	$("#reg").click(function(){
		let username = $("#username1").val();
		let password = $("#password1").val();
		let repassword = $("#repassword").val();
		if((username && password && repassword) && (password === repassword)){
			$.ajax({
				url:'http://10.35.164.178:8080/reg',
				data:{
					username:username,
					password:password
				},
				success(data){
					if(data==="success"){
						alert("注册成功");
						history.go(0);
					}
					if(data==="exist"){
						alert("已存在的用户名");
					}
				}
			})
		}else{
			alert("有问题")
		}
	})
</script>
